<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>网站推荐</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="网址,工具网址,免费API,免费工具">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="css/front_index.css" rel="stylesheet">

<script type="text/javascript" src="vue/vue.min.js"></script>
<link href="vue/element/index.css" rel="stylesheet">
<script type="text/javascript" src="vue/element/index.js"></script>

</head>
  
<body>
<div class="lyear-layout-web" id="vue">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">
       
      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <a @click="reset()"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
      </div>
	  
      <div class="lyear-layout-sidebar-scroll">
        
        <nav class="sidebar-main">
			
          <ul class="nav nav-drawer">
			
            <!-- <li class="nav-item"> <a href="index.html"><i class="mdi mdi-home"></i> 后台首页</a> </li>
            
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> 表单</a>
              <ul class="nav nav-subnav">
                <li> <a >基本元素</a> </li>
              </ul>
            </li> -->
			
			<li v-for="(item, index) in categorys" :key="index" 
				:class="{'nav-item': true, 'nav-item-has-subnav': item.count !== 0}">
			  
			  <!-- 当 item.value 为 0 时显示的菜单 -->
			  <template v-if="item.count === 0">
				<a >
				  <i :class="item.icon"></i> {{ item.label }}
				</a>
			  </template>
			  
			  <!-- 当 item.value 不为 0 时显示的菜单（带子菜单） -->
			  <template v-else>
				<a @click="clickCategory(item)" :class="{ 'text-success': currentCategory === item.value }">
				  <i :class="item.icon"></i> {{ item.label }}
				</a>
				<ul class="nav nav-subnav">
				  <li v-for="(child, i) in types" :key="i" @click="clickType(child)">
					<a :class="{ 'text-info': currentType === child.value }">{{ child.label }}</a>
				  </li>
				</ul>
			  </template>
			</li>
			
          </ul>
		  
        </nav>
        
        <div class="sidebar-footer">
          <p class="copyright">Copyright &copy; 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
        </div>
      </div>
      
    </aside>
    <!--End 左侧导航-->
    
    <!--头部信息-->
    <header class="lyear-layout-header">
      
      <nav class="navbar navbar-default">
        <div class="topbar">
          
          <div class="topbar-left">
			<span  class="btn btn-primary btn-sm badge">{{list.length}}</span>
            <div class="lyear-aside-toggler">
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
              <span class="lyear-toggler-bar"></span>
            </div>
            <span class="navbar-page-title">  网站推荐  </span>
          </div>
		  
		  <div class="topbar-center">
			  <button class="btn btn-primary btn-sm" type="button" @click="toMessage">
			    <i class="mdi mdi-comment-outline" ></i>留言<span  class="badge">{{messageParam.total}}</span>
			  </button>
			
		
		  </div>
          
          <ul class="topbar-right">
            <li >
              <!-- <img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="笔下光年" /> -->
              <span><a href="login" target="_blank" class="mdi mdi-image-filter-drama" ></a></span>
            </li>
          </ul>
          
        </div>
      </nav>
      
    </header>
	
	<!-- 模态窗口 -->
	<button id="showModal" v-show="false" class="btn btn-primary m-r-5" type="button"  data-toggle="modal" data-target="#exampleModal" >打开</button>
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="exampleModalLabel">{{operateType}}</h4>
	      </div>
		  
	      <div class="modal-body">
			  
			  <div class="form-group">
			    <label for="message-text" class="control-label">网址描述：</label>
			    <textarea class="form-control" v-model="message.msg"></textarea>
			  </div>
			  
	      </div>
		  
	      <div class="modal-footer">
	        <button id="hiddenModal" v-show="false" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			<button type="button" class="btn btn-default" @click="clickClose()">关闭</button>
	        <button type="button" class="btn btn-primary" @click="clickEnter()">确定</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	
    <!--End 头部信息-->
    
    <!--页面主要内容-->

    <main class="lyear-layout-content" style="position: relative; padding-top: 70px;">

		<div class="col-lg-12" style="position: sticky; top: 0; z-index: 100; background: white; padding: 15px 0; margin-bottom: 20px;">
			<div class="input-group">
				<input type="text" v-model="query.description" class="form-control" placeholder="输入内容" @keydown.enter="listWebsite()">
				<span class="input-group-btn">
					<button class="btn btn-default" type="button" @click="clickClean()">清空</button>
				  <button class="btn btn-default" type="button" @click="listWebsite()">搜索</button>
				</span>
			</div>
			<button style="margin-right: 3px;" class="btn btn-sm" v-for="(item,index) in tags" :class=" cartColor[index % cartColor.length]" @click="clickTag(item)">{{item.value}}</button>
		</div>

      <div class="container-fluid">
        
        <div class="row">
          
          <div class="col-sm-6 col-lg-3" v-for="(item,index) in list">
            <div class="card" style="height: 150px;">
              <!-- <div class="card-header" :class=" cartColor[index % cartColor.length]"> -->
			  <div class="card-header" >
                <h4 @click="copyMethod(item)"><i class="mdi mdi-share-variant"></i>{{item.name}}</h4>
                <ul class="card-actions" >
                  <li>
                    <button type="button" @click="clickVisitUrl(item)">
						<a v-if="item.imginfo == null" :href="item.link" target="_blank">
							<button class="btn btn-sm btn-danger" >点击访问</button>
						</a>
						<a v-else :href="item.link" target="_blank">
							<img :src="item.imginfo" style="height: 30px;"/>
						</a>
						<i class="mdi mdi-keyboard-return"></i>
					</button>
                  </li>
                </ul>
              </div>
              <div class="card-body">
                <p class="truncate">{{item.description}}</p>
              </div>
            </div>
          </div>
          <!-- .col-sm-6 -->
        
        </div>
		
          
		
        <!-- End Cards with Actions -->
        
      </div>
	  
	<div class="infinite-list-wrapper" style="overflow:auto">
	  
	  <div class="list-group"  infinite-scroll-disabled="disabled">
		  <div v-for="item in listMessages" class="list-item">
			  <a class="list-group-item ">
			    <h4 class="list-group-item-heading">{{item.createtime}}留言：{{item.msg}}</h4>
			    <p class="list-group-item-text" v-if="item.updatetime!=null">{{item.updatetime}}回复:{{item.reply}}</p>
			  </a>
			  
		  </div>
	  </div>
	  
	  <div class="list-group" v-if="!noMore" @click="load">
		  <a  class="list-group-item ">
		    <h4 class="list-group-item-heading">点击加载更多...</h4>
		  </a>
	  </div>
	  <div class="list-group" v-if="noMore">
		  <a  class="list-group-item ">
		    <h4 class="list-group-item-heading">没有更多了</h4>
		  </a>
	  </div>
	  
	</div>
	  
	  
	  <!-- <div >
	  	<ul   >
	  	  <li v-for="i in count" >{{ i }}</li>
	  	</ul>
	  </div> -->
	  
	  
      
    </main>
    <!--End 页面主要内容-->
	
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>

<!--消息提示-->
<script src="js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="js/lightyear.js"></script>


<script type="text/javascript" src="vue/vue_config.js"></script>
<script type="text/javascript" src="vue/axios.min.js"></script>
<script type="text/javascript" src="vue/vue_api.js"></script>
<script type="text/javascript" src="vue/commons.js"></script>

<script type="text/javascript">
	new Vue({
		el: '#vue',
		data: {
			cartColor: ['bg-primary','bg-success','bg-info','bg-warning',
			'bg-danger','bg-purple','bg-cyan','bg-brown'],
			tags:[],//标签list  tag
			categorys:[],
			types:[],
			type: {},
			query:{},
			list: [],
			
			showModal:{},
			hiddenModal:{},
			operateType:"留言",
			
			listMessages:[],//页面使用的
			messages:[],//每次请求返回的
			message:{},//添加使用的

			count: 10,
			loading: false,
			//noMore: true,
			
			showModal:{},
			hiddenModal:{},
			
			messageParam:{
				page: 1,
				size: 10
			},//查询使用

			currentCategory:"",
			currentType:"",

			
		},
		created(){
			this.listSelectInfoTags();//获取查询标签
			this.treeSelectInfoCategorys();//获取查询的树目录
			let id = getUrlParam("id");
			if(id != null){
				this.query.id = id;
			}
			let wid = getUrlParam("wid")
			if(wid != null){
				this.query.wid = wid;
				console.log("调用wid");
				this.getDescription();
			}else{
				this.listWebsite();
			}
			
			this.listMsg();//获取留言


		},
		mounted(){
			this.showModal = document.getElementById("showModal")
			this.hiddenModal = document.getElementById("hiddenModal")
			
		},
		computed: {
		
		 noMore () {
		 	console.log(this.listMessages.size)
		 	return this.listMessages.length >= this.messageParam.total 
		 },
		 
		  disabled () {
			return this.loading || this.noMore
		  }
		},
		
		methods: {
			
			clickTag(item){
				this.quickClickClean();
				this.query.description = item.value;
				this.listWebsite();
			},
		
			copyMethod(item){
				console.log("复制");
				copyToClipboard(getBaseUrl()+"?id="+item.id)
			},
			
			clickClean(){
				this.query={};
				this.currentCategory="";
				this.currentType="";
				this.listWebsite();
			},
			
			quickClickClean(){
				this.query = {};
				this.currentCategory="";
				this.currentType="";
			},
			
			load () {
				console.log("触发加载方法")
				
				setTimeout(() => {
				  this.messageParam.page = this.messageParam.page+1;
				  this.listMsg();
				}, 500)
			  },
			
			toMessage(){
				this.showModal.click();
			},
			clickEnter(){
				this.addMessage();
			},
			clickClose(){
				this.website = {};
				this.hiddenModal.click();
			},
			
			
			reset(){
				this.type={};
				this.query={};
				this.currentCategory="";
				this.currentType=""
				this.listWebsite();
			},
			
			//点击大类
			clickCategory(category){
				console.log(category);
				this.currentCategory = category.value;
				this.treeSelectInfoTypes(category)
			},
			//点击类型
			clickType(type){
				//点击类型，点击快捷按钮就先清空
				this.quickClickClean();
				this.currentType = type.value;
				console.log(type);
				this.type = type;
				this.query.type = type.value;
				this.listWebsite(type)
			},
			
			clickVisitUrl(item){
				var url = rootUrl+"front/visitUrl";
				fetchDataPost(url,{"urlid":item.id});
			},
			
			listSelectInfoTags(){
				var url = rootUrl+"front/tags";
				fetchDataGet(url).then(res =>{
					this.tags = res.list;
				})
			},
			
			treeSelectInfoCategorys(){
				var url = rootUrl+"front/categorys";
				fetchDataGet(url).then(res =>{
					this.categorys = res.list;
				})
			},
			
			treeSelectInfoTypes(category){
				var url = rootUrl+"front/types";
				fetchDataPost(url,category).then(res =>{
					this.types = res.list;
				})
			},
			
			
			listWebsite(){
				var url = rootUrl+"front/listWebsite";
				fetchDataPost(url,this.query).then(res =>{
					if(res.code === 200){
						this.list = res.list;
						success(res.message);
						this.query.id = '';
						this.query.wid = '';
						this.listSelectInfoTags();
					}else{
						danger(res.message);
					}
				})
			},
			
			listMsg(){
				var url = rootUrl+"front/listMessage";
				console.log(this.messageParam)
				fetchDataPostList(url,this.message,this.messageParam).then(res =>{
					if(res.code === 200){
						this.messages = res.list;
						//this.listMessages.push(this.messages)
						this.messages.map( item => this.listMessages.push(item))
						console.log("留言列表",this.listMessages)
						this.messageParam = res.metaInfo;
						success(res.message);
					}else{
						danger(res.message);
					}
				})
			},
			
			addMessage(){
				var url = rootUrl+"front/addMessage";
				fetchDataPost(url,this.message).then(res =>{
					if(res.code === 200){
						//重新查询留言信息
						this.messageParam={
							page:1,
							size:10
						}
						this.listMessages=[];
						this.listMsg();
						this.hiddenModal.click();
						this.message={}
					}else{
						danger(res.message);
					}
				})
			},
			
			async getDescription(){
				var url = rootUrl+"front/getDescription";
				await fetchDataPost(url,this.query).then(res =>{
					if(res.code === 200){
						console.log("getDescription",res)
						this.query.description = res.data.content;
						this.query.wid = '';
						this.listWebsite();
					}else{
						danger(res.message);
					}
				})
			},
		}

	})
</script>

</body>
</html>